import { defineStore } from "pinia"
import { useStorage } from '@vueuse/core'
import { appName } from '@/config/app'
import bus from '@/eventBus'
import { setting } from '@cop/editor/editorConfig/setting'

export type Theme = 'light' | 'dark'
const html = document.querySelector("html")
export const useSettingStore = defineStore("setting", {
  state: () => ({
    theme: useStorage<Theme>(`${appName}-theme`, 'light'),
    themeColor: useStorage<string>(`${appName}-themeColor`, '#0EA9E3')
  }),
  actions: {
    setTheme(theme: Theme) {
      this.theme = theme
      bus.state.theme = theme
      html.className = theme
      document.body.className = theme
    },
    setThemeColor(color: string) {
      this.themeColor = color
      setting.styles.light.scrollBarColor = color
      document.documentElement.style.setProperty("--themeColor", color)
    }
  },
})
